<template>
    <!-- 头部搜索框 -->
    <el-form :model="queryForm" :inline="true">
        <el-form-item label="変更日付">
            <el-input v-model="queryForm.insertTime" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleQuery">検索</el-button>
            <el-button @click="handleReset">リセット</el-button>
        </el-form-item>
    </el-form>

    <!-- 功能按钮 -->
    <el-row :gutter="4">
        <el-col :span="6">
            <el-button type="danger" @click="handleRemove('')">削除</el-button>
        </el-col>
    </el-row>
<!--列表-->
    <el-table :data="detailList" style="width: 100%" row-key="insertTime" default-expand-all @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="insertTime" label="変更日付" width="120" />
        <el-table-column prop="kanjiname" label="漢字氏名" width="120" />
        <el-table-column prop="kananame" label="カナ氏名" width="120" />
        <el-table-column prop="address1" label="自宅漢字住所" width="140" />
        <el-table-column prop="address2" label="自宅カナ住所" width="140" />
        <el-table-column prop="phonenum" label="自宅電話番号" width="120" />
        <el-table-column prop="passcode" label="自宅郵便番号" width="120" />
        <el-table-column prop="companyAddress1" label="勤務先漢字住所" width="140" />
        <el-table-column prop="companyAddress2" label="勤務先カナ住所" width="140" />
        <el-table-column prop="companyPhonenum" label="勤務先電話番号" width="140" />
        <el-table-column prop="companyPasscode" label="勤務先郵便番号" width="140" />
        <el-table-column fixed="right" label="オプション" min-width="120">
        <template #default="scope">
            <el-button link type="primary" size="small" @click="handleRemove(scope.row.insertTime)">
            削除
            </el-button>
        </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination_container">
        <el-pagination v-model:current-page="queryForm.pageNum" v-model:page-size="queryForm.pageSize"
            :page-sizes="[10, 20, 30, 40, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

</template>

<script setup>
import {ref,onMounted} from 'vue';
import {searchDetailList as fetchDetailList, removeResume} from '@/apis/user';
import { format } from 'date-fns';
import { ElMessage } from 'element-plus';
let queryForm = ref ({
    insertTime:'',
    pageNum: 1,
    pageSize: 10
})
let detailList = ref([]);
let total = ref(0);
let selectIds = ref([]);

// 删除时的表单数据
let form = ref({
    id: undefined,
    insertTime:undefined
})

// 查询方法
function handleQuery(){
    console.log('insertTime==>', queryForm.value.insertTime);
    fetchList();
}
// 重置方法
function handleReset() {
    queryForm.value.insertTime = '';
    fetchList();
}

onMounted(() => {
    fetchList();
});

// 获取列表数据
function fetchList() {
    fetchDetailList(queryForm.value).then((res) => {
        if (res.data.code === 200) {
           // 格式化日期
           detailList.value = res.data.data.list.map(item => {
                if (item.insertTime) {
                    item.insertTime = format(new Date(item.insertTime), 'yyyy-MM-dd HH:mm:ss');
                }
                return item;
            });
            total.value = res.data.data.total;
        }
    }).catch((error) => {
        ElMessage.error('ユーザー情報を取得中にエラーが発生しました。');
        console.error('请求失败', error);
    });
}

function handleSizeChange(sizeNumber) {
    queryForm.value.pageSize = sizeNumber;
    fetchList();
}
// 点击下一页，上一页
function handleCurrentChange(pageNumber) {
    queryForm.value.pageNum = pageNumber;
    fetchList();
}
// 多选变化
function handleSelectionChange(selection) {
    let insertTimes = selection.map(item => item.insertTime)
    selectIds.value = insertTimes;
    
    console.log('ids===>', selectIds.value);
}
// 删除按钮，弹出是否要删除数据，确定就删除，取消就不删除
function handleRemove(insertTime) {
    // 走删除接口
    let insertTimes = [];
    if (insertTime === '') {
        insertTimes = selectIds.value;
    } else {
        insertTimes = [insertTime];
    }
    console.log('insertTimes===>', insertTimes)
    // id其实是点击操作下的删除按钮时才会有数据
    ElMessageBox.confirm(
    `データを削除しますか?`,
    '削除確認',
    {
      confirmButtonText: '削除',
      cancelButtonText: '取消',
      type: 'error',
    }
  )
    .then(() => {
      removeResume(insertTimes).then(res => {
        if(res.data.code == 200) {
            ElMessage({
                message: '削除しました。',
                type: 'success',
            })
            // 刷新列表
            fetchList();
        }
      })
    })
    .catch(() => {
        
    })
}

</script>

<style lang="scss" scoped>

</style>